<template>
    <view>
        <view v-if="isLoad === null" class="margin-top load notexist text-l load-project"></view>
        <view v-if="isLoad === false" class="margin-top load loading text-l load-project"></view>

        <view :class="'main ' + (skin.IS_SUB ? 'sub-margin-bottom' : '')" v-if="isLoad">
            <view class="plan-date">
                <cmpt-calendar :mode="one" :hasDays="hasDays" @click="bindClickCmpt" @monthChange="bindMonthChangeCmpt" />
            </view>

            <view class="list padding-project">
                <view v-if="list === null" class="load loading text-l text-grey"></view>
                <text v-else-if="list.length == 0" class="no-project icon-emoji text-l text-grey">本日没有可预约的项目哦~</text>
                <view class="item card-project shadow-project" @tap="url" :data-url="'../detail/meet_detail?id=' + item.teacherId" v-for="(item, index) in list" :key="index">
                    <view v-if="index % 4 == 0" class="left bg-blue bg-project"></view>

                    <view v-else-if="index % 4 == 1" class="left bg-green"></view>

                    <view v-else-if="index % 4 == 2" class="left bg-orange"></view>

                    <view v-else class="left bg-cyan"></view>

                    <block v-if="item.pic">
                        <image class="img loading" :src="item.pic" :lazy-load="true" mode="aspectFill" />
                    </block>

                    <view class="title text-cut">{{ item.title }}</view>

                    <view class="time">
                        <text class="icon-time margin-right-xxs"></text>
                        {{ item.timeSlot }}
                    </view>
                </view>
            </view>
        </view>

        <view style="height: 150rpx"></view>

        <block v-if="skin.IS_SUB">
            <!-- parse <template is="menuTpl" :data="curMenu:'meet_calendar',returnHome:false"/> -->
            <block name="menuTpl" v-if="false">
                <view class="tab-bar">
                    <view v-if="false" class="tab-bar-home" @tap="url" data-type="relaunch" data-url="/pages/home/index/home_index">
                        <text class="tab-bar-home-text icon-homefill text-grey"></text>
                    </view>

                    <view class="tab-bar-border"></view>
                    <view class="tab-bar-item" @tap="url" data-type="relaunch" data-url="/projects/worktrain/pages/default/index/default_index">
                        <image class="tab-icon" :src="'/projects/worktrain/images/tabbar/home' + ('home_index' == 'home_index' ? '_cur' : '') + '.png'"></image>
                        <view :class="'tab-text ' + ('home_index' == 'home_index' ? 'menu-project' : '')">首页</view>
                    </view>

                    <view class="tab-bar-item" @tap="url" data-type="relaunch" data-url="/projects/worktrain/pages/news/index/news_index">
                        <image class="tab-icon" :src="'/projects/worktrain/images/tabbar/news' + ('home_index' == 'news_index' ? '_cur' : '') + '.png'"></image>
                        <view :class="'tab-text ' + ('home_index' == 'news_index' ? 'menu-project' : '')">公告通知</view>
                    </view>

                    <view v-if="skin.cate2 !== false" class="tab-bar-item" @tap="url" data-type="relaunch" data-url="/projects/worktrain/pages/meet/calendar/meet_calendar">
                        <image class="tab-icon" :src="'/projects/worktrain/images/tabbar/day' + ('home_index' == 'meet_calendar' ? '_cur' : '') + '.png'"></image>
                        <view :class="'tab-text ' + ('home_index' == 'meet_calendar' ? 'menu-project' : '')">预约日历</view>
                    </view>

                    <view class="tab-bar-item" @tap="url" data-type="relaunch" data-url="/projects/worktrain/pages/my/index/my_index">
                        <image class="tab-icon" :src="'/projects/worktrain/images/tabbar/my' + ('home_index' == 'my_index' ? '_cur' : '') + '.png'"></image>
                        <view :class="'tab-text ' + ('home_index' == 'my_index' ? 'menu-project' : '')">个人中心</view>
                    </view>
                </view>
            </block>
        </block>
    </view>
</template>

<script>
import cmptCalendar from '@/cmpts/public/calendar/calendar_comm/calendar_comm_cmpt';
const cloudHelper = require('@/utils/helper/cloud_helper.js');
const pageHelper = require('@/utils/helper/page_helper.js');
const timeHelper = require('@/utils/helper/time_helper.js');
const ProjectBiz = require('@/utils/biz/project_biz.js');
const api = require('@/api/api.js');
// const api = require('@/utils/api/api.js');
export default {
    components: {
        cmptCalendar
    },
    data() {
        return {
            isLoad: true,
            list: [
                {
                    id: 1,
                    title: 'AI主题讲座',
                    timeDesc: '1',
                    pic: '/static/images/def_avatar.png'
                },
                {
                    id: 2,
                    title: '前端技术分享',
                    timeDesc: '10:30-11:30',
                    pic: '/static/images/def_avatar.png'
                },
                {
                    id: 3,
                    title: '产品需求讨论',
                    timeDesc: '14:00-15:00',
                    pic: '/static/images/def_avatar.png'
                },
                {
                    id: 4,
                    title: '团队建设活动',
                    timeDesc: '16:00-17:00',
                    pic: '/static/images/def_avatar.png'
                }
            ],
            day: '',
            hasDays: ['2025-07-17'],

            skin: {
                IS_SUB: false,
                cate2: false
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        ProjectBiz.initPage(this);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: async function () {
		this.day  = timeHelper.time('Y-M-D');
        this.setData(
            {
                day: timeHelper.time('Y-M-D')
            },
            async () => {
                await this.loadHasListFun();
                await this.loadListFun();
            }
        );
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: async function () {
        await this.loadHasListFun();
        await this.loadListFun();
        uni.stopPullDownRefresh();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        loadListFun: async function () {
            let params = {
                day: this.day
            };
            let opts = {
                title: this.isLoad ? 'bar' : 'bar'
            };
            try {
                this.setData({
                    list: null
                });
                let list = await api.getCalendarList(params);
                this.setData({
                    list: list,
                    isLoad: true
                });
                // await cloudHelper.callCloudSumbit('meet/list_by_day', params, opts).then((res) => {
                //     this.setData({
                //         list: res.data,
                //         isLoad: true
                //     });
                // });
            } catch (err) {
                console.log('CatchClause', err);
                console.log('CatchClause', err);
                console.error(err);
            }
        },

        loadHasListFun: async function () {
            let params = {
                day: timeHelper.time('Y-M-D')
            };
            let opts = {
                title: 'bar'
            };
            try {
                let hasDays = await api.getCalendarHasDay(params);
                this.setData({
                    hasDays: hasDays
                });
            } catch (err) {
                console.log('CatchClause', err);
                console.log('CatchClause', err);
                console.error(err);
            }
        },




        bindClickCmpt: async function (e) {
            let day = e.detail.day;
            console.log('day', day);
            this.day = day;
            await this.loadListFun();
            // await this.loadListFunNew();
            // this.setData(
            //     {
            //         day
            //     },
            //     // async () => {
            //     //     await this.loadListFun();
            //     // }
            // );
        },

        bindMonthChangeCmpt: function (e) {},

        url: async function (e) {
            pageHelper.url(e, this);
        }
    }
};
</script>
<style>
@import '@/style/style/skin.css';

.main {
    padding: 0 0 20rpx;
}

.main .plan-date {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: var(--ShadowSize) var(--greyShadow);
}

.main .list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 30rpx 20rpx;
}

.main .list .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    padding: 0 30rpx 0 0;
    background-color: #fff;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    overflow: hidden;
}

.main .list .item .left {
    width: 8rpx;
    height: 100rpx;
    margin-right: 15rpx;
}

.main .list .item .img {
    width: 65rpx;
    height: 65rpx;
    border-radius: 10rpx;
    position: relative;
}

.main .list .item .title {
    flex: 1;
    text-align: left;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-left: 20rpx;
}

.main .list .item .time {
    width: 140rpx;
    text-align: right;
    font-size: 26rpx;
    color: #999;
}

.main .list .no-project {
    padding: 30rpx 30rpx;
    font-size: 28rpx;
}

</style>
